<template>
  <div id="container">
    <div class="title">{{title}}</div>
    <div class="content">
      <div v-html="content"></div>
      <span>发布时间：{{time | dateFormat}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "", //标题
      content: "", //内容
      time: "" // 时间
    };
  },
  mounted() {
    this.getNoticeInfo();
  },
  methods: {
    getNoticeInfo() {
      this.$axios
        .get("/api/article/selectById/" + this.$route.params.id)
        .then(res => {
          this.title = res.data.article.title;
          this.content = res.data.article.content;
          this.time = res.data.article.time;
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: "获取公告失败",
            type: "error",
            duration: "800"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid #f6f4f0;
  .title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
  }
  .content {
    margin: 30px 100px;
    p {
      text-indent: 2em;
    }
    span {
      float: right;
      margin-top: 20px;
      color: #383838;
      font-size: 14px;
    }
  }
}
@media screen and (max-width: 768px) {
  #container {
    .content {
      margin: 20px 20px;
    }
  }
}
</style>